<template>
  <section>
    <el-row :gutter="20"
            class="tableHead">
      <el-col :span="3">
        <div>被拆运单</div>
      </el-col>
      <el-col :span="3">
        <div>合同编号</div>
      </el-col>
      <el-col :span="7">
        <div>发货信息</div>
      </el-col>
      <el-col :span="7">
        <div>收货信息</div>
      </el-col>
    </el-row>
    <template v-for="(item, index) in listData">
      <div :key="index"
           :class="index === listData.length - 1 ? '' : 'tableItem'">
        <el-row :gutter="20"
                class="line-herger28 mb10">
          <el-col :span="3">
            <div v-if="item.flag"
                 class="mt20 fontSty pointer"
                 @click="changeChildView(index)">
              收起<i class="el-icon-arrow-up" />
            </div>
            <div v-else
                 class="mt20 fontSty pointer"
                 @click="changeChildView(index)">
              展开<i class="el-icon-arrow-down" />
            </div>
          </el-col>
          <el-col :span="3">
            <div class="mt20 fontSty-1">{{ item.no }}</div>
          </el-col>
          <el-col :span="7">
            <div class="mt20">
              <p class="fontSty-2">{{ item.from.cstName }}</p>
              <span class="fontSty-3">发货地址：</span>{{ item.from.address
              }}<br />
              <span class="fontSty-3">联系方式：</span>{{ item.from.customer }}
              {{ item.from.tel }}<br />
              <span class="fontSty-3">发货时间：</span>{{ item.from.time }}
            </div>
          </el-col>
          <el-col :span="7">
            <div class="mt20">
              <p class="fontSty-2">{{ item.to.cstName }}</p>
              <span class="fontSty-3">收货地址：</span>{{ item.to.address
              }}<br />
              <span class="fontSty-3">联系方式：</span>{{ item.to.customer }}
              {{ item.to.tel }}<br />
              <span class="fontSty-3">收货时间：</span>{{ item.to.time }}
            </div>
          </el-col>
        </el-row>
        <div v-if="item.flag">
          <template v-for="(element, i) in item.children">
            <div :key="`${index}+${i}`">
              <el-row :gutter="20"
                      class="childItem line-herger28">
                <el-col :span="3"
                        class="h100">
                  <icon-svg icon-name="zuoshangjiao"
                            class-name="icon-bg" />
                  <div class="childTit">{{ `拆分运单${i + 1}` }}</div>
                </el-col>
                <el-col :span="3"
                        class="pad0">
                  <div class="fontSty-5">{{ item.no }}</div>
                </el-col>
                <el-col :span="7"
                        class="shipSty">
                  <div v-if="i === 0 || type === '1'"
                       class="line-herger28">
                    <icon-svg icon-name="qidian_jiedian"
                              class-name="icon-1" />
                    {{ item.from.cstName }}<br />
                    <p class="fontSty-4">发货地址：{{ item.from.address }}</p>
                    <p class="fontSty-4">
                      联系方式：{{ item.from.customer }} {{ item.from.tel }}
                    </p>
                    <p class="fontSty-4">发货时间：{{ item.from.time }}</p>
                  </div>
                  <div v-else
                       class="line-herger28">
                    <icon-svg icon-name="qidian_jiedian"
                              class-name="icon-1" />
                    {{ item.children[i - 1].stationName }}<br />
                    <p class="fontSty-4">
                      发货地址：{{ item.children[i - 1].stationAreaName
                      }}{{ item.children[i - 1].stationAddres }}
                    </p>
                    <p class="fontSty-4">
                      联系方式：{{ item.children[i - 1].contact.contactName }}
                      {{ item.children[i - 1].contact.contactMobile }}
                    </p>
                    <p class="fontSty-4">
                      发货时间：{{ item.children[i - 1].toTime }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="7"
                        style="position: relative">
                  <div v-if="i + 1 === item.children.length || type === '1'"
                       class="line-herger28">
                    <icon-svg icon-name="zhongdian_jiedian"
                              class-name="icon-1" />
                    {{ item.to.cstName }}<br />
                    <p class="fontSty-4">收货地址：{{ item.to.address }}</p>
                    <p class="fontSty-4">
                      联系方式：{{ item.to.customer }} {{ item.to.tel }}
                    </p>
                    <p class="fontSty-4">收货时间：{{ item.to.time }}</p>
                  </div>
                  <div v-else
                       class="line-herger28">
                    <icon-svg icon-name="zhongdian_jiedian"
                              class-name="icon-1" />
                    {{ element.stationName }}<br />
                    <p class="fontSty-4">
                      收货地址：{{ element.stationAreaName
                      }}{{ element.stationAddres }}
                    </p>
                    <p class="fontSty-4">
                      联系方式：{{ element.contact.contactName }}
                      {{ element.contact.contactMobile }}
                    </p>
                    <p class="fontSty-4">收货时间：{{ element.toTime }}</p>
                  </div>
                </el-col>
                <el-col :span="4">
                  <span v-if="i === 0"
                        class="right">
                    <p style="color: #e52914">
                      运单回到待调度列表
                    </p>
                  </span>
                  <span v-else-if="item.children[i - 1].carrierId"
                        class="right fontSty-1">
                    调度给 <span style="color:var(--prev-color-primary);margin-left: 10px;">{{ item.children[i - 1].carrierName }}</span>
                  </span>
                  <span v-else
                        class="right">
                    <p style="color: #e52914">
                      运单回到待调度列表
                    </p>
                  </span>
                </el-col>
              </el-row>
            </div>
          </template>
        </div>
      </div>
    </template>
  </section>
</template>

<script>
export default {
  name: "DispatchDetails",
  props: {
    type: {
      type: String,
      default: null
    },
    processList: {
      type: Array,
      default: () => []
    },
    recordsList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      listData: []
    };
  },
  watch: {
    recordsList: {
      handler (val) {
        if (val && val.length > 0) {
          val.map((item) => {
            item.approachStation = this.processList;
            let arr = [...this.processList];
            arr.push({ ...item.to });
            item.children = this.type === "0" ? arr : this.processList;
            item.flag = false;
          });
          this.listData = val;
        }
      },
      deep: true
    },
    processList: {
      handler (val) {
        if (val) {
          if (this.recordsList && this.recordsList.length > 0) {
            this.recordsList.map((item) => {
              item.approachStation = val;
              let arr = [...val];
              arr.push({ ...item.to });
              item.children = this.type === "0" ? arr : val;
              item.flag = false;
            });
            this.listData = this.recordsList;
          }
        }
      },
      deep: true
    }
  },
  methods: {
    handleChange (val) {
      console.log(val);
    },
    changeChildView (index) {
      const arr = this.listData;
      arr[index].flag = !arr[index].flag;
      this.listData = [...arr];
    }
  }
};
</script>

<style lang="scss" scoped>
.tableHead {
  padding: 15px 0;
  background: #fafafa;
}
.tableTit {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  background: rgba(250, 250, 250, 0.39);
}
.tableCon {
  padding: 0 20px;
}
.pad20-0 {
  padding: 20px 0;
}
.tableItem {
  padding: 5px 0;
  border-bottom: 1px solid #e6e6e6;
}
.splitorder-info {
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 15px 15px 15px 0px;
  background: rgba(250, 250, 250, 0.39);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    justify-content: space-around;
  }
  .right {
    color: var(--prev-color-text-purered);
  }
}
p {
  margin: 0;
}
.mt20 {
  margin-top: 20px;
}
.mlr30 {
  margin-left: 30px;
  margin-right: 30px;
}
.line-herger28 {
  line-height: 28px;
  word-break: break-all;
  white-space: pre-wrap;
}
.start {
  min-height: 145px;
  // display: flex;
  // justify-content: flex-start;
  // align-items: flex-start;
}
h4 {
  margin: 0;
  font-size: 16px;
}
.fontSty {
  font-size: 12px;
  font-weight: 500;
  color: var(--prev-color-text-ashes);
}
.fontSty-1 {
  font-size: 14px;
  color: var(--prev-color-text-ashes);
}
.fontSty-2 {
  font-size: 16px;
  font-weight: bold;
  color: var(--prev-color-text-ashes);
}
.fontSty-3 {
  font-size: 14px;
  color: var(--prev-border-color-lightgrey);
  font-weight: 500;
}
.fontSty-4 {
  font-size: 14px;
  color: var(--prev-color-text-silvergrey);
  font-weight: 500;
}
.fontSty-5 {
  font-size: 14px;
  color: var(--prev-color-text-ashes);
  padding-right: 24px;
}
.mb10 {
  margin-bottom: 10px;
}
.icon-bg {
  width: 120px !important;
  height: 30px;
  position: absolute;
  left: -20px;
  top: 0;
  margin: 0;
}
.childItem {
  background: #fafafa;
  padding: 10px 0;
  margin: 10px 0 !important;
}
.childTit {
  width: 120px !important;
  height: 30px;
  position: absolute;
  left: 5px;
  top: 0;
  margin: 0;
  color: var(--prev-bg-white);
}
.pad0 {
  padding: 0 !important;
}
.icon-1 {
  width: 24px;
  height: 24px;
  position: absolute;
  left: -20px;
  top: 2px;
}
.shipSty {
  position: relative;
  padding: 0 0px;
}
.h100 {
  height: 100px;
}
</style>
